<template>
  <div class="main">
    <headTit :tit="tit"></headTit>
    <div class="content">
      <h1>this is sisi test!</h1>
      <div class="btns">
        <a v-for="btn in btns" class="btn" @click="showNoti(btn.options)">{{btn.content}}</a>
      </div>
      <notice :show="showNotice" :options="options"></notice>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTit from '../../components/headTit/headTit.vue';
  import notice from '../../components/notice/notice.vue';

  export default {
    components: {
      headTit,
      notice
    },
    data () {
      return {
          tit: 'notice',
          showNotice: false,
          options: {},
          btns: [
            {
              content: 'success',
              options: {
                autoClose: false,
                content: 'you great! 棒棒哒'
              }
            },
            {
              content: 'warning',
              options: {
                autoClose: false,
                textColor: '#92253f',
                backgroundColor: '#fbff7c',
                content: 'it is not good idea!'
              }
            },
            {
              content: 'error',
              options: {
                autoClose: true,
                showTime: 5000,
                backgroundColor: '#fc5050',
                content: 'it it bad idea! I do not like it!'
              }
            },
            {
              content: 'info',
              options: {
                autoClose: true,
                backgroundColor: '#769FCD',
                content: 'there is info for you study!'
              }
            }
          ]
      };
    },
    methods: {
      showNoti (option) {
        this.showNotice = true;
        this.options = option;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .main{
    .content{
      h1{
        text-align: center;
        font-size: 24px;
        line-height:36px;
        padding: 20px 0;
        margin-bottom: 30px;
      }
      .btns{
        .btn{
          display: block;
          width: 150px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border: 2px solid #41B883;
          margin: 20px auto;
          border-radius: 3px;
          font-size: 18px;
          color: #e11;
        }
      }
    }
  }
</style>
